<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     .box{
        width: 400px;
        height: 300px;
        border: 1px solid red;
        margin: 0 auto;
     }
     .box ul{display: flex;margin: 0;padding: 0;
    list-style: none;}

    .box ul li.active{
        background-color: red;
        color: aliceblue;
        cursor: pointer;
       
    }
    li{
        flex: 1;
        border: 1px solid red;
        text-align: center;
    }
    .onnt.phone1{
        width: 398px;
        height: 280px;
        background-color: pink;
        display: none;
    }
    .phone2{
        background-color: aquamarine;
        width: 398px;
        height: 280px;
       
    }
    .phone3{
        background-color: rgb(73, 26, 138);
        width: 398px;
        height: 280px;
        
    }
    .cont >div{display: none;}

   

    </style>
</head>
<body>
    <div class="box">
        <ul>
            
            <li>电脑1</li>
            <li>电脑2</li>
            <li>电脑3</li>
        </ul>
         <div class="cont">
            <div class="phone1">这是电脑1</div>
            <div class="phone2">这是电脑2</div>
            <div class="phone3">这是电脑3</div>
        </div>
    </div>
</body>

            <script>
                var ali = document.querySelectorAll('.box ul li')
                var acont = document.querySelectorAll('.cont>div')

                // 1设置默认值
                var index =1;
                //2 根据默认值设置默认布局

            ali[index].className ='active';

                acont[index].style.display = 'block'

                // 03绑定事件
                for(var i = 0;i<ali.length;i++){
                    // ali[i].index = i;
                    ali[i].setAttribute('index',i)
                    ali[i].onclick = function(){
                         //04获取点击的元素
                         
                         ali[index].className=''

                         this.className='active'
                        acont[this.index].style.display = 'block'

                          console.log(this)
                          // console.log(this.getAttribute('index'))
                          console.log(this.index)
                        //   index = this.index;
                    }
                }
            </script>

</html>